<template>
  <div class="app-container">
    <div class="work-off">
    	<div class="main-top">
			<el-form label-width="120px"   :inline="true" :model="formInline" class="form-style">
				<el-form-item   label="信息修改提交单号:">
				<el-input v-model="formInline.infoNum"  placeholder=""></el-input>
				</el-form-item>
				<el-form-item   label="司员编号:">
					<el-input v-model="formInline.memberNmum"  placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="司员姓名:">
					<el-input v-model="formInline.name"  placeholder=""></el-input>
				</el-form-item>
				<el-form-item class="btn-margin">
					<el-button @click="gettableList()" type="primary">搜索</el-button>
				</el-form-item>
				<el-form-item   label="申请时间:">
					<el-date-picker v-model="formInline.startTime" type="date" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
					<span class="line">-</span>
					<el-date-picker v-model="formInline.endTime" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>                    
				</el-form-item>
				<el-form-item label-width="147px"  label="联系方式:">
					<el-input v-model="formInline.phone"  placeholder=""></el-input>
				</el-form-item>
				<el-form-item class="btn-margin">
					<el-button @click="reSet()" type="primary">重置</el-button>
				</el-form-item>
			</el-form>	
			</div>
		<div class="main-table">
        <el-table stripe v-loading= tableLoading  :data="tableList" height="500" border style="width: 100%">
			<el-table-column align="center" prop="numbers" label="信息修改提交单号" > </el-table-column>
			<el-table-column align="center" prop="jobNumber" label="配送员编号" > </el-table-column>
			<el-table-column align="center" prop="name" label="配送员姓名" > </el-table-column>
			<el-table-column align="center" prop="chargeName" label="联系方式" > </el-table-column>
			<el-table-column align="center" prop="phone" label="提交时间" > </el-table-column>
			<el-table-column align="center" prop="remarks" label="提交备注" > </el-table-column>
			<el-table-column align="center" prop="auditStatus" label="审核状态" > </el-table-column>
				<el-table-column  label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="mini" v-if= showBtn(scope)  @click="approl(scope)">审核</el-button>
				</template>
				</el-table-column>     
        </el-table>
		<div class="block">
			<el-pagination
			background
			layout="prev, pager, next"
			:total="totalPage"
			@current-change="handleCurrentChange()"    
			>
			</el-pagination>
		</div>
      </div>
			<template name='approl'>
				<div class="approlLayer">
				<el-dialog center title="信息修改审核" :visible.sync="showApprol">
					<ul class="mainInfo">
						<li>
							<div class="infoLeft">
								<span class="infoTitle">信息修改提交单号：</span>
								<span class='infoValue'>{{layerList.numbers}}</span>
							</div>
							<div class="infoRight">
								<span class="infoTitle">配送员编号：</span>
								<span class='infoValue'>{{layerList.jobNumber}}</span>
							</div>
						</li>
						<li>
							<div class="infoLeft">
								<span class="infoTitle">工控号：</span>
								<span class='infoValue'>{{layerList.controlNumber}}</span>
							</div>
							<div class="infoRight">
								<span class="infoTitle">配送员姓名：</span>
								<span class='infoValue'>{{layerList.name}}</span>
							</div>
						</li>
						<li>
							<div class="infoLeft">
								<span class="infoTitle">联系方式：</span>
								<span class='infoValue'>{{layerList.phone}}</span>
							</div>
							<div class="infoRight">
								<span class="infoTitle">点位编号：</span>
								<span class='infoValue'>{{layerList.pointNumber}}</span>
							</div>
						</li>
						<li>
							<div class="infoLeft">
								<span class="infoTitle">点位名称：</span>
								<span class='infoValue'>{{layerList.pointName}}</span>
							</div>
							<div class="infoRight">
								<span class="infoTitle">提交时间：</span>
								<span class='infoValue'>{{layerList.addTime}}</span>
							</div>
						</li>
						<li>
							<div class="infoLeft">
								<span class="infoTitle">备注：</span>
								<span class='infoValue'>{{layerList.remarks}}</span>
							</div>
						</li>
					</ul>
					<div class="tableInfo">
						<div class="tableItem">
							<span class="itemTitle">修改前售货机编号</span>
							<span class="itemValue">{{layerList.beforeVendorNumber}}</span>
						</div>
						<div class="tableItem">
							<span class="itemTitle">修改后售货机编号</span>
							<span class="itemValue">{{layerList.afterVendorNumber}}</span>
						</div>
					</div>
						<div slot="footer" class="dialog-footer">
						<el-button class='approl' type="primary" @click="submit('1')">通 过</el-button>
						<el-button class="refuse" @click="submit('2')">拒 绝</el-button>
						</div>
				</el-dialog>
				</div>
    </template>
		</div>
	</div>
</template>

<script>
import {gettableList, getaprollList, approlSub} from '@/api/checkManage'

export default {
  data() {
    	return {
			formInline:{infoNum:'',memberNmum:'',name:'',startTime:'',endTime:'',phone:''},
			tableList:[{
				"addTime": "2018-05-16T02:54:36.603Z",
				"auditStatus": "等待审核",
				"id": "string",
				"jobNumber": "string",
				"name": "string",
				"numbers": "string",
				"phone": "string",
				"remarks": "string"
			}],
			tableLoading:false,
            currentPage:1,
			totalPage:0,
			showApprol:false,
			layerList:{}
      	}
  },
     methods: {
    	gettableList(current) {
            this.tableLoading = true
            let data= 
               {
				"current": current || this.currentPage,
				"endTime": this.formInline.endTime,
				"jobumber":  this.formInline.memberNmum,
				"name":  this.formInline.name,
				"number":  this.formInline.infoNum,
				"phone":  this.formInline.phone,
				"size": 10,
				"startTime":  this.formInline.startTime,
				}
            gettableList(data).then(res=>{
                console.log(res)
                this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
            })
        },
        reSet() {
            this.formInline = {infoNum:'',memberNmum:'',name:'',startTime:'',endTime:'',phone:''}
            this.gettableList()
        },

        handleCurrentChange(current) {
            this.gettableList(current)
		},
		showBtn(item){
			if(item.row.auditStatus === '审核通过'){
				return false
			} else {
				return true
			}
		},
		approl(item) {
			console.log(item)
			const id = item.row.id
			this.showApprol = true
			getaprollList(id).then(res=>{
				this.layerList = res.data.data
			})
		},
		 search() {
            this.currentPage = 1
            this.gettableList()
        },
		submit(value){
			if(value === '1'){
				console.log('没进来')
				console.log(this.layerList)
				let id = this.layerList.id
				let params={
					status:this.layerList.auditStatus
				}
				approlSub(id,params).then(res =>{
					console.log('审核结果')
					console.log(res)
					this.showApprol = false
					this.gettableList()
				})
			}else{
				this.showApprol = false //没有拒绝接口
			}
		}
        
    },
    created () {
        this.gettableList()
    }
  
}
</script>
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
	.work-off{
		.main-top{
			padding: 32px 15px;
			padding-bottom: 20px;
			background-color: #FFF;
			overflow: hidden;
			.el-input{
				width: 150px ;
			}
			.el-button{
      	padding: 11px 33px;
    	}
    	.el-form-item{
    		margin-right: 0px;
    	}
			.btn-margin{
				margin-left: 20px;
			}
			.el-date-editor{
    		width: 190px !important;
    	}
			.line{
    		display: inline-block;
      	padding: 0 2px;
      	font-size: 14px;
      	color: #CCCCCC;
      	font-weight: bold;
			}
		}
		.main-nav{
			@include navStyle;
		}
		.addScore{
			.el-dialog{
				width: 40%;
				.el-dialog__header{
     			@include dialogHeader;
      	}
			}
			.el-select{
				width:100px !important;
			}
			.el-form-item{
				margin-right: 0px;
			}
		
		}
		.approlLayer{
			.mainInfo{
				li{
					list-style: none;
					display: flex;
					flex-direction: row;
					margin-bottom: 10px;
					.infoLeft{
						width:50%;
					}
					.infoRight{
						width: 50%;
					}
					span{
						display: inline-block;
					}
					.infoTitle{
						width: 140px;
						text-align: right	;
					}
					.infoValue{
						width: 160px;
						text-align: left;
					}
				}
			}
			.tableInfo{
				border:1px solid #666666;
				border-bottom: none;
				margin: 15px 10px 0   10px;
				.tableItem{
					border-bottom: 1px solid #666666;
					height: 35px;
					line-height: 35px;
					.itemTitle{
						display: inline-block;
						width: 40%;
						text-align: center;
					border-right: 1px solid #666666;
					}
					.itemValue{
						display: inline-block;
						width: 50%;
						text-align: center;
					}
				}
			}
		}
		.block{
            text-align: center;
            margin-top: 15px;
        }
		
	}
</style>

